import React, { Component } from "react";
import { Form, Input, Button, Row, Col, Radio, Select } from "antd";
import Content from "../../components/Content";
const { Item } = Form;
const { TextArea } = Input;
const { Option } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}

class MediumUpdateForm extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  state = {
    value: 1
  };

  state = {
    dataSource: []
  };

  handleChange = value => {
    this.setState({
      dataSource:
        !value || value.indexOf("@") >= 0
          ? []
          : [`${value}@gmail.com`, `${value}@163.com`, `${value}@qq.com`]
    });
  };

  onChange = e => {
    console.log("radio checked", e.target.value);
    this.setState({
      value: e.target.value
    });
  };
  onSubmit = evt => {
    evt.preventDefault();
    const { onSubmit } = this.props;
    onSubmit && onSubmit();
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      }
    };

    return (
      <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
        <Item label="培养基编号">
          {getFieldDecorator("medium_id")(<Input />)}
        </Item>
        <Item label="培养基名称">
          {getFieldDecorator("medium_name")(<Input />)}
        </Item>
        <Item label="培养基成分">
          {getFieldDecorator("country")(<Input />)}
        </Item>
        <Item label="培养基灭菌条件">
          {getFieldDecorator("gathering_area")(<Input />)}
        </Item>
        <Item label="培养基类型">
          {getFieldDecorator("gathering_place")}
          <Select
            mode="tags"
            style={{ width: "100%" }}
            onChange={handleChange}
            tokenSeparators={[","]}
            showArrow={true}
          >
            <Option value="jack">传代培养基</Option>
            <Option value="lucy">传代培养基</Option>
            <Option value="tom">传代培养基</Option>
          </Select>
        </Item>
        <Item label="备注说明">
          {getFieldDecorator("longitude")}
          <TextArea autosize={{ minRows: 2, maxRows: 6 }} />
        </Item>
        <Item label="保密情况">
          {getFieldDecorator("latitude")}
          <Radio.Group
            onChange={this.onChange}
            value={this.state.value}
            className="radio"
          >
            <Radio value={1}>公开</Radio>
            <Radio value={2}>保密</Radio>
          </Radio.Group>
        </Item>
        <Item wrapperCol={{ offset: 3 }}>
          <Row guuter={16}>
            <Col>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Col>
          </Row>
        </Item>
      </Form>
    );
  }
}
const WrapperedUpdate_mediumForm = Form.create({
  name: "add acquisition"
})(MediumUpdateForm);

class MediumUpdate extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedUpdate_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default MediumUpdate;
